<template>
  <div class="CustomerDetail">
    <!-- header -->
    <new-header title="历史数据" />
    <!-- 顶部 -->
    <div class="cus-center model model1">
      <div class="icon-title">
        <img src="@/assets/login_images/icon1.png" alt="" class="icon-img">
        <div class="info">
          <div class="info-name">
            <p>班级名称：</p>
            <p>{{ this.history_obj.className }}</p>
          </div>
          <div class="info-name">
            <p>上课时间：</p>
            <p>{{ this.history_obj.beginTime }}</p>
          </div>
          <div class="info-name">
            <p>课堂时长：</p>
            <p>{{ this.history_obj.classDuration }}</p>
          </div>
          <div class="info-name">
            <p>监测人数：</p>
            <p>{{ this.history_obj.monitoruserCount }}人</p>
          </div>
        </div>
        <div class="right">
          <h1 class="icon-word">基本信息</h1>
          <div class="right-img">
            <img src="@/assets/login_images/download.png" alt="" class="">
          </div>
        </div>

      </div>
      <!-- <div class="info">
        <div class="info-name">
          <p>班级名称：</p>
          <p>初二一班</p>
        </div>
      </div> -->

    </div>
    <!-- 中部 -->
    <div class="model mid-body">
      <div class="left">
        <el-progress
          type="circle"
          :percentage="100"
          :stroke-width="20"
          :show-text="false"
          :width="145"
          color="rgba(0, 210, 158, 1)"
        />
        <div class="word">
          <p class="p1">{{ this.history_obj.isStandard }}</p>
          <!-- <p class="p2">整体达标</p> -->
        </div>
      </div>
      <div class="left2">
        <h1>有效运动负荷</h1>
        <h2>{{ this.history_obj.effTrimp }}</h2>
        <h3>({{ this.history_obj.effTrimp_Describe }})</h3>
      </div>
      <div class="left2 left2-2">
        <h1>有效运动负荷时间</h1>
        <h2>{{ this.history_obj.time }}</h2>
        <h3>({{ this.history_obj.time_Describe }})</h3>
      </div>
      <div class="left2 left2-3">
        <h1>课堂负荷结构</h1>
        <h2>{{ this.history_obj.structure }}</h2>
        <h3>({{ this.history_obj.structure_Describe }})</h3>
      </div>
    </div>

    <div class="history-list-body">
      <!-- 选项卡 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="课堂负荷结构" name="1">
          <detail-ketang ref="ketang" :kt_obj="kt_obj" />
        </el-tab-pane>
        <el-tab-pane label="有效运动负荷" name="2">
          <you-xiao :history_obj="history_obj" />
        </el-tab-pane>
        <el-tab-pane label="达标率" name="3">
          <da-biao ref="dabiao" :db_obj="db_obj" />
        </el-tab-pane>
        <el-tab-pane label="强度分布" name="4">
          <qiang-du ref="qiangdu" :qd_obj="qd_obj" />
        </el-tab-pane>
        <el-tab-pane label="学生详情" name="5" :record_id="RecordID">
          <xue-sheng />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import HisRecords from '@/api/hisRecords.js'
// 引入基本模板
import NewHeader from '@/components/NewHeader.vue'
import YouXiao from './components/YouXiao.vue'
import DetailKetang from './components/DetailKetang.vue'
import DaBiao from './components/DaBiao.vue'
import QiangDu from './components/QiangDu.vue'
import XueSheng from './components/XueSheng.vue'
export default {
  name: 'HistoryDetail',
  components: {
    DetailKetang,
    YouXiao,
    DaBiao,
    QiangDu,
    XueSheng,
    NewHeader
  },
  data() {
    return {
      table_list: [
        {
          time: '2020-0608--52',
          score: '综合评分',
          heart: '心肺适能',
          power: '力量适能',

          flex: '柔韧适能',
          balance: '平衡适能',
          reaction: '反应适能'
        }
      ],
      currentPage: 1,
      size: 5,
      total: 100,
      activeName: '1',
      RecordID: '',
      history_obj: {},
      kt_obj: {},
      db_obj: {},
      qd_obj: {}
    }
  },
  mounted() {
    this.RecordID = this.$route.params.id
    this.BasicDetail()
    this.HisClassStructure()
    this.HisComplianceRate()
    this.IntensityDistribution()
    if (this.activeName === '1') {
      this.$refs.ketang.flag = true
    }
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab)
      if (tab.name === '1') {
        this.$refs.ketang.flag = true
      }
      if (tab.name === '3') {
        this.$refs.dabiao.flag = true
      }
      if (tab.name === '4') {
        this.$refs.qiangdu.flag = true
      }
    },
    async BasicDetail() {
      const params = {
        RecordID: this.RecordID
      }
      const result = await HisRecords.BasicDetail(params) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.history_obj = result.result
        console.log(this.history_obj)
      }
    },
    async HisClassStructure() {
      const params = {
        RecordID: this.RecordID
      }
      const result = await HisRecords.HisClassStructure(params) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.kt_obj = result.result
      }
    },
    async HisComplianceRate() {
      const params = {
        RecordID: this.RecordID
      }
      const result = await HisRecords.HisComplianceRate(params) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.db_obj = result.result
      }
    },
    async IntensityDistribution() {
      const params = {
        RecordID: this.RecordID
      }
      const result = await HisRecords.IntensityDistribution(params) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.qd_obj = result.result
      }
    },

    // 页面size改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      this.get_customer_list()
    },
    // 页面page改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.get_customer_list()
    }
  }
}
</script>

<style lang="scss" scoped>
.top-header{
  background-color: white;
  overflow: hidden;
  position: absolute;
  top: -70px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 25px;
  left: 0;
  .left{
    float: left;
    display: flex;
    align-items: center;
    img{
      width: 15px;
    }
    span{
      margin-left: 10px;
      width: 80px;
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
  }

}
@media screen and (max-width: 1400px) {
  .big-tag{
    display: block!important;
    .tag-item-body{
      margin: 10px 0!important;
      width: fit-content!important;
    }
  }
}

.pagin{
  margin-top: 25px;
  text-align: right;
}
.CustomerDetail{
  position: relative;
  padding: 25px;
  .model{
    background-color: white;
    // padding-bottom: 25px;
    margin-bottom: 10px;
    &.model1{
      margin-bottom: 0;
      // border-bottom: 1px solid #f0f2f5;
    }
  }
  .cus-center{
    .info{
      display: flex;
      padding: 0 25px;
      .info-name{
        margin-right: 34px;
        display: flex;
        p{
          font-size: 16px;
          color: black;
        }
      }
    }
  }
  .mid-body{
    overflow: hidden;
    padding:10px 30px;
    .left{
      float: left;
      position: relative;
      .word{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
        p{
          margin: 0;
        }
        .p1{
          display: block;
          width: 100px;
          font-size: 30px;
          color: rgba(13, 14, 16, 1);
          text-align: center;
        }
        .p2{
          margin-top: 10px;
          font-size: 14px;
          color: rgba(163, 169, 175, 1);
          text-align: center;
        }
      }
    }
    .left2{
      float: left;
      text-align: center;
      margin: 0 0 0 60px;
      h1{
        font-size: 18px;
        color: rgba(13, 14, 16, 1);
      }
      h2{
        color: rgba(33, 223, 164, 1);
        font-size: 40px;
        margin-bottom: 0;
      }
      h3{
        font-size: 16px;
        color: rgba(0, 0, 0, 0.25);
      }
      &.left2-2{
        h2{
          color: rgba(250, 145, 80, 1);
        }
      }
      &.left2-3{
        h2{
          color: rgba(255, 131, 151, 1);
        }
      }
    }
  }
  .history-list-body{
    background-color: white;
    // margin-top: 25px;

  }
}
::v-deep .el-tabs__nav-scroll{
  padding-left: 25px;
  padding-top:10px ;
}
::v-deep .el-tabs__item.is-active{
  color: #42b983;
}
::v-deep .el-tabs__active-bar{
  background-color: #42b983;
}
::v-deep .el-tabs__item{
  font-size: 16px;
  padding-right: 50px;
}
//--------g公共样式
.icon-title{
  display: flex;
  justify-content: flex-start;
  line-height: 36px;
  padding: 0 25px;
  border-bottom: 1px solid $bg-color;
  position: relative;
  align-items: center;
  .right{
    position: absolute;
    right:20px;
    top: -70px;
    // height: 36px;
    display: flex;
    justify-content: flex-end;
    margin-left: 56px;
    .right-img{
      margin-left: 10px;
      margin-top: 4px;
      width: 26px;
      img{
        width: 100%;
      }
    }
    .icon-word{

      font-size: 16px;
      color: #262626;
      margin: 0;
      padding-left: 10px;
    }
  }

  .icon-img{
    width: 36px;
    height: 36px;
    // background-color: seagreen;
  }

}
.btn-item{
  color: #409eff;
}

//------------------媒体查询
@media screen and (max-width:1400px) {
  .history-list-body{
    // max-height: 351px;
    max-height: 400px;
  }
}
</style>
